<template>
    <div class="zw-common-scrollbar render-user-tag" :class="{ 'render-tags': props.tags?.length }">
        <el-tag
            v-for="(tag, i) in props.tags"
            :key="tag.id"
            effect="plain"
            :closable="props.closable"
            :disable-transitions="false"
            @close="handleClose(tag, i)">
            <img class="work-usericon" src="@/assets/image/customer/renyuan_icon.png" /> {{ tag.name }}
        </el-tag>
    </div>
</template>
<script lang="ts" setup>
import { withDefaults } from 'vue';
const props = withDefaults(
    defineProps<{
        tags: Array<{
            id: number;
            name: string;
        }>;
        closable?: boolean;
    }>(),
    {
        closable: true
    }
);

const emit = defineEmits(['update:tags']);

const handleClose = (tag: { id: number; name: string }, i: number) => {
    const updateValue = [...props.tags];
    updateValue.splice(i, 1);
    emit('update:tags', updateValue);
};
</script>

<style lang="scss" scoped>
.render-user-tag {
    max-height: 234px;
    overflow-y: auto;
    overflow-x: hidden;
}
.render-tags {
    line-height: normal;
    margin: 8px -6px 0px;
}
.work-usericon {
    width: 10px;
    height: 11px;
    vertical-align: middle;
    margin-right: 8px;
}
.el-tag {
    user-select: none;
    cursor: pointer;
    height: auto;
    line-height: normal;
    padding: 9px 12px;
    border-radius: 2px;
    border-radius: 4px;
    border: 1px solid #ffc69e;
    background-color: #fffaf9;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #ff6b00;
    margin: 12px 6px 0;
    :deep(.el-tag__close) {
        margin-left: 14px;
        --el-tag-hover-color: #ff6b00;
    }
}
</style>
